<template>
  <d2-container>
    <!-- <el-dialog
      title=""
      custom-class="problemFeedback-dialog"
      width="700px"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :modal="false"
    > -->
    <div class="problemFeedback-dialog">
      <img :src="dialogTop" alt="" />
      <div>
        <p>问题反馈</p>
        <el-form ref="form" :model="form" :rules="rules" label-width="0px">
          <el-form-item label="" prop="content">
            <el-input
              v-model="form.content"
              type="textarea"
              placeholder="请输入您的问题，我们会经快去解决"
            ></el-input>
          </el-form-item>
          <p class="upload-title">上传附件</p>
          <span class="upload-text">图片、视频、文件</span>
          <el-form-item label="" prop="" >
            <el-upload
              :action="action"
              class="avatar-uploader"
              list-type="picture-card"
              :limit="1"
              ref="file"
              :file-list="fileList"
              :on-success="handleAvatarSuccess"
              :on-remove="handleOnRemove"
            >
              <i class="el-icon-plus"></i>
              <div>上传</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="page-item-left-btn cancel" @click="handleClose">取消</div>
        <div class="page-item-left-btn" @click="handleSubmit">确定</div>
      </span>
      <!-- </el-dialog> -->
    </div>
  </d2-container>
</template>

<script>
import { computed } from "vue";
import { request } from "@/api/_service.js";
import util from "@/libs/util.js";
export default {
  data() {
    return {
      dialogVisible: true,
      dialogTop: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/dialog-top.png`;
      }),
      form: {
        token: util.cookies.get("token"),
        content: "",
        files: "",
      },
      action: `${process.env.VUE_APP_API}/mapi/common/uploadFile`,
      rules: {
        content: [
          {
            required: true,
            message: "请输入您的问题",
            trigger: "blur",
          },
        ],
      },
      fileList: [],
    };
  },

  methods: {
    handleClose() {
      this.form = {
        token: util.cookies.get("token"),
        content: "",
        files: [],
      };
      // this.dialogVisible = false;
      this.$refs.file.clearFiles();
      this.$refs.form.resetFields();
      this.$router.push({ path: "/index" });
    },
    handleOnRemove(file, fileList) {
      this.form.files = "";
      this.fileList = "";
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(res, file, fileList, "res, file, fileList");
      if (res.code === 200) {
        this.$message.success(res.msg);
        this.form.files = JSON.stringify([res.data.image]);
        this.fileList = file;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleSubmit() {
      // this.dialogVisible = false;
      this.$refs.form.validate((valid) => {
        if (valid) {
          request({
            url: "/mapi/userFeedback/create",
            method: "post",
            data: this.form,
          }).then((ret) => {
            // console.log(ret, "requestrequest");
            this.$message.success("您的反馈内容已提交成功！");
            this.$router.push({ path: "/index" });
          });
        } else {
          // this.$message.error("表单校验不通过！");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page-item-left-btn {
  color: #fff;
  margin-left: 24px;
  font-size: 18px;
  width: 150px;
  height: 48px;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 27px;
  margin-bottom: 20px;
  border: 2px solid transparent;
  background: transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(131deg, #823ad7 0%, #482cd0 100%),
    linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));
  img {
    width: 22px;
    height: 17px;
    margin-right: 5px;
  }
  &:hover {
    background-image: linear-gradient(131deg, #823ad7 0%, #823ad7 100%),
      linear-gradient(131deg, #823ad7 0%, #823ad7 100%);
  }
  &.cancel {
    background: #541d89;
    &:hover {
      background: #6f2cad;
    }
  }
}

.el-dialog__wrapper {
  left: 300px;
}

.problemFeedback-dialog {
  width: 700px;
  height: 677px;
  margin: 10vh auto;
  color: #fff;
  padding: 50px 40px 120px;
  border-radius: 19px;
  border: 1px solid transparent;
  background: transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(179deg, #1e52ab 0%, #3e004e 100%),
    linear-gradient(180deg, rgba(73, 100, 159, 1), rgba(108, 24, 132, 1));
  font-size: 18px;
  line-height: 25px;
  & > img {
    width: 482px;
    height: 28px;
    margin: -64px auto 25px;
    display: block;
  }
  p {
    margin: 0;
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 20px;
    &.upload-title {
      margin-bottom: 8px;
    }
  }
  .upload-text {
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    display: block;
    margin-bottom: 16px;
  }
  .avatar-uploader{
    height: 100px;
  }
  ::v-deep(.el-textarea__inner) {
    background: #2a206f;
    border: none;
    color: #fff;
    padding: 27px 26px;
    font-size: 16px;
    height: 250px;
  }
  ::v-deep(.el-input__inner) {
    background: #2d1867;
    border: none;
    color: #fff;
    font-size: 16px;
    height: 50px;
    padding-left: 50px;
  }
  ::v-deep(.el-input__prefix) {
    left: 20px;
    i {
      font-size: 16px;
      line-height: 50px;
    }
  }
  ::v-deep(.el-upload--picture-card) {
    width: 100px;
    height: 100px;
    line-height: 1;
    background-color: transparent;
    color: #fff;
    i {
      font-size: 24px;
      color: #fff;
      margin: 20px auto 15px;
    }
  }
  ::v-deep(.el-upload-list__item) {
    width: 100px;
    height: 100px;
    line-height: 1;
    background-color: transparent;
    margin: 0px 16px 16px 0;
  }

  .dialog-footer {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
  }
}


</style>
